<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户密码格式判断</title>
    <style>
        input {
            margin: 20px ;
            width: 300px;
            height: 50px;
            text-indent: 20px;
            font-size: 24px;
        }
        span{
            font-size: 24px;
        }
    </style>

</head>

<body>
    <input type="text" placeholder="请输入用户名"><span></span>
    <br>
    <input type="password" placeholder="请输入密码">
    <script>
        /*    需求：有一个用户注册信息，用户名输入表单：用户输入的内容必须是小写字母、大写字母、数字以及下划线和中划线组成，
                而且长度必须在6-16位之间：如果用户鼠标移开输入框（onblur）检查：
                如果成功，后面提示，当前用户名有效，否则提示无限 */

        let input = document.querySelector('input');
        let span = document.querySelector('span');

        //onblur  失去焦点
        input.onblur = function () {
            // console.log(1);
            let text = input.value.trim();

            //进行正则判断
            let texts = /[a-zA-Z][a-zA-Z0-9_-]{5,15}/;
            // console.log(texts.test('afkA_8-9934'));


            if (texts.test(text)) {
                // alert('用户名输入正确');
                span.innerText = '用户名正确'
            }else{
            // alert('用户名输入格式出错');
                span.innerText = '用户名格式错误'

            }



        }



    </script>
</body>

</html>